<template>
  <view class="w-full max-w-[750rpx] mx-auto min-h-screen bg-[#f6f8fa] p-[32rpx] box-border">
    <text
      class="block text-[64rpx] font-extrabold mb-[56rpx] text-center bg-gradient-to-r from-blue-500 to-blue-400 text-transparent bg-clip-text drop-shadow">个人基本信息</text>
    <view class="flex flex-col gap-[36rpx] max-w-[700rpx] w-full mx-auto">
      <!-- 个人信息管理卡片 -->
      <view
        class="bg-white rounded-[24rpx] shadow-[0_4rpx_24rpx_rgba(33,150,243,0.08)] p-[36rpx] box-border overflow-hidden border border-blue-50">
        <view class="flex items-center mb-[28rpx]">
          <view class="w-[72rpx] h-[72rpx] bg-blue-100 rounded-[16rpx] flex items-center justify-center mr-[24rpx]">
            <text class="text-[40rpx]">👤</text>
          </view>
          <view class="flex-1">
            <text class="block text-[40rpx] font-bold text-gray-900 mb-[8rpx]">个人信息管理</text>
            <text class="text-[28rpx] text-gray-400 leading-relaxed">查看和管理个人基本信息</text>
          </view>
        </view>
        <nut-button type="primary" block
          class="w-full box-border h-[96rpx] bg-blue-500 hover:bg-blue-600 active:bg-blue-700 rounded-[16rpx]"
          @click="goToList">
          <view class="flex items-center justify-center">
            <text class="text-white mr-[12rpx] text-[32rpx]">📋</text>
            <text class="text-white text-[32rpx] font-medium">查看个人信息列表</text>
          </view>
        </nut-button>
      </view>
      <!-- 新增个人信息卡片 -->
      <view
        class="bg-white rounded-[24rpx] shadow-[0_4rpx_24rpx_rgba(16,185,129,0.08)] p-[36rpx] box-border overflow-hidden border border-green-50">
        <view class="flex items-center mb-[28rpx]">
          <view class="w-[72rpx] h-[72rpx] bg-green-100 rounded-[16rpx] flex items-center justify-center mr-[24rpx]">
            <text class="text-[40rpx]">➕</text>
          </view>
          <view class="flex-1">
            <text class="block text-[40rpx] font-bold text-gray-900 mb-[8rpx]">新增个人信息</text>
            <text class="text-[28rpx] text-gray-400 leading-relaxed">添加新的个人信息记录</text>
          </view>
        </view>
        <nut-button type="primary" block
          class="w-full box-border h-[96rpx] bg-green-500 hover:bg-green-600 active:bg-green-700 rounded-[16rpx]"
          @click="goToAdd">
          <view class="flex items-center justify-center">
            <text class="text-white mr-[12rpx] text-[32rpx]">📝</text>
            <text class="text-white text-[32rpx] font-medium">新增个人信息</text>
          </view>
        </nut-button>
      </view>
    </view>
    <!-- 底部提示 -->
    <view
      class="mt-[48rpx] bg-white rounded-[20rpx] p-[28rpx] shadow-sm max-w-[700rpx] w-full mx-auto box-border border border-gray-100">
      <view class="flex items-center justify-center">
        <text class="text-[28rpx] text-gray-500 text-center font-medium leading-relaxed">
          💡 请先完善个人基本信息，以便更好地为您提供健康服务
        </text>
      </view>
    </view>
    <!-- 快速操作提示 -->
    <view class="mt-[24rpx] max-w-[700rpx] w-full mx-auto box-border">
      <view class="flex items-center justify-center gap-[16rpx]">
        <view class="flex-1 h-[2rpx] bg-gray-200"></view>
        <text class="text-[24rpx] text-gray-400 px-[16rpx] tracking-widest">快速开始</text>
        <view class="flex-1 h-[2rpx] bg-gray-200"></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'

function goToList() {
  Taro.navigateTo({
    url: '/pages/info/personal/list'
  })
}

function goToAdd() {
  Taro.navigateTo({
    url: '/pages/info/personal/add'
  })
}
</script>